<template>
  <div class="foreign">
	 <div class="head">
		<div class="forHeader">
			<router-link to="/home"><i class="el-icon-arrow-left left"></i></router-link>
			<input type="text" value="搜索关键字" class="right">
	    </div>
	    <div class="nav">
			<el-row>
			  <el-col :span="8"><div class="grid-content bg-purple">
			  <p>位置<i class="el-icon-caret-bottom"></i></p>
			  </div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple-light"><p>筛选<i class="el-icon-caret-bottom"></i></p></div></el-col>
			  <el-col :span="8"><div class="grid-content bg-purple"><p>推荐<i class="el-icon-caret-bottom"></i></p></div></el-col>
			</el-row>
	    </div>
	 </div>
    <div class="forMain">
		<ul  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<router-link to="/particulars" class="color">
				<li v-for="obj in arr">
					<div class="con"  @click="ls(obj)">
						<img v-bind:src="obj.coverImg" alt="">
						<h2>{{obj.title}}</h2>
						<div>
							<p class="fen">{{obj.avgLevel}}分</p>
							<p class="pu">{{obj.roomtypeName}}</p>
							<p class="pirce">￥{{obj.price}}.00起</p>
						</div>
					</div>
				</li>
			</router-link>
		</ul>
    </div>
  </div>
</template>

<script>
import url from '../data/foreign.json'
var arr = [];
for(var i= 0;i < 14;i++){
  arr.push(url.pageInfo.list[i])
}
export default {
  name: 'foreign',
  data () {
    return {
      arr:arr
    }
  },
  methods:{
  	loadMore() {
      this.loading = true;
      if(this.arr.length < url.pageInfo.list.length - 1){
        setTimeout(() => {
          console.log(1)
          for (let i = 1; i <= 10; i++) {
            let last = url.pageInfo.list[this.arr.length];
            this.arr.push(last);
          }
          this.loading = false;
        }, 2500);
      }else{
         this.loading = false;
      }
    },
    ls(v){
  		localStorage.setItem("name","3");
  		eventBus.value = v;
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.foreign{
	width: 100%;
	position: relative;
	z-index: 100;
	background: white;
	.head{
		width: 100%;
		height: 100px;
		position: fixed;
		top:0;
		left: 0;
		background: white;
		z-index: 999;
		.forHeader{
			width: 100%;
			height:50px;
			border-bottom: 1px solid #eee;
			.left{
				font-size: 30px;
				line-height: 50px;
				color: #666;
				margin:0 20px;
				float: left;
			}
			.right{
				width: 75%;
				float: left;
				height: 35px;
				margin-top:8px;
				border:none;
				background: #eee;
				border-radius: 7px;
				text-indent: 2em;
			}
		}
		.nav{
			.grid-content{
				text-align: center;
				line-height: 50px;
				i{
					font-size: 13px;
					margin-left: 5px;
				}
			}
		}
	}
	.forMain{
		width: 100%;
		margin: 100px 0 0 0;
		padding-bottom: 20px;
		.color{
			color: black;
			text-decoration: none;
		}
		li{
			margin-bottom: 50px;
			list-style: none;
		}
		.con{
			width: 90%;
			margin: 20px auto;
			img{
				width: 100%;
			}
			h2{
				font-size: 18px;
				font-weight: 500;
				margin: 10px 0;
			}
			.fen{
				float: left;
				color: green;
				margin-right: 10px;
			}
			.pu{
				float: left;
			}
			.pirce{
				color: red;
				float: right;
			}
		}
	}
}
</style>
